系列：從現場踩坑到 AI 工具 — IT Diagnostic Agent 開發實錄

一開始根本沒打算做英文版

IT Diagnostic Agent 最初是純繁體中文介面。

這不是疏忽，是刻意的決定。

目標使用者是台灣和東南亞台商企業的 IT 工程師，繁體中文就夠了。英文版？之後再說。

所以第一版上線的時候，整個介面從頭到尾只有中文。

為什麼後來加了英文？

用了一段時間之後，有幾個情境讓我意識到英文版是必要的：

• 在地同事（越南、柬埔寨）也需要用這個工具，他們看不懂繁中
• 放上 GitHub 之後，有外國工程師想試用但看不懂
• 想在 LinkedIn 上分享，純中文介面對國際社群不友善

需求確認了，問題來了：我要怎麼在一個沒有框架的純靜態 HTML 裡加多語言支援？

自己實作一個簡單的 i18n 系統

i18n 是 Internationalization 的縮寫（i 和 n 之間 18 個字，所以叫 i18n），指的是讓應用程式支援多語言的機制。

React、Vue 都有成熟的 i18n 套件，但我沒有框架。所以我請 Claude 幫我設計一套純 JavaScript 的解法。

核心概念很簡單：把所有顯示給使用者的文字，存進一個物件，根據當前語言選擇顯示哪一組。

翻譯物件

const i18n = {
  zh: {
    title: 'IT 診斷助手',
    selectCategory: '請選擇故障類型',
    networkIssue: '網路問題',
    hardwareIssue: '硬體問題',
    accountIssue: '帳號問題',
    back: '上一步',
    askAI: '詢問 AI',
    networkQ1: '是全部人斷線，還是只有你？',
    networkQ1_all: '全部人',
    networkQ1_me: '只有我',
    // ...
  },
  en: {
    title: 'IT Diagnostic Agent',
    selectCategory: 'Select issue category',
    networkIssue: 'Network Issue',
    hardwareIssue: 'Hardware Issue',
    accountIssue: 'Account Issue',
    back: 'Back',
    askAI: 'Ask AI',
    networkQ1: 'Is everyone disconnected, or just you?',
    networkQ1_all: 'Everyone',
    networkQ1_me: 'Just me',
    // ...
  }
};

let currentLang = 'zh'; // 預設繁中

翻譯函數

function t(key) {
  return i18n[currentLang][key] || i18n['zh'][key] || key;
}

注意這裡的 fallback 順序：找不到當前語言 → fallback 到繁中（不是英文）。因為繁中才是完整版，英文是後來補的，有些新功能的翻譯可能還沒補齊。

語言切換

function switchLanguage(lang) {
  currentLang = lang;
  localStorage.setItem('lang', lang);
  renderCurrentView();
}

// 初始化：讀上次的設定
const savedLang = localStorage.getItem('lang') || 'zh';
currentLang = savedLang;

加英文之後才發現的問題：HTML 裡有寫死的中文

這是整個重構過程最麻煩的部分。

一開始只有中文版的時候，有些文字是直接寫在 HTML 裡的：

<h1>IT 診斷助手</h1>
<p>請選擇故障類型</p>

切換語言的時候，這些文字當然不會動。

修法是把所有 UI 文字都改成動態填入：

// HTML 只放結構，不放文字
// <h1 id="main-title"></h1>
// <p id="subtitle"></p>

document.getElementById('main-title').textContent = t('title');
document.getElementById('subtitle').textContent = t('selectCategory');

清查一遍下來，發現有 30 幾個地方是寫死的，全部要改。這個工作很枯燥，我直接丟給 Claude 處理——貼上 HTML，叫它把所有文字抽出來放進 i18n 物件，然後改成動態填入。

AI 回覆也要跟著切換語言

決策樹的 i18n 做好了，但還有一個地方沒處理：AI 的回覆。

呼叫 Claude API 的 system prompt 要告訴它用哪種語言回答：

const systemPrompt = currentLang === 'zh'
  ? '你是一個 IT 故障排查助手。請用繁體中文回答，語氣專業但易懂。'
  : 'You are an IT troubleshooting assistant. Answer in English, professionally but clearly.';

今天的反思

「先做繁中，之後再加英文」這個順序，其實造成了不少重構成本。

如果一開始就用 i18n 物件管理所有文字，之後加語言只需要加一組翻譯，不需要大改結構。

事後加功能的成本，永遠比一開始就設計進去高。 這個道理我知道，但還是犯了。

明天預告： 工具預設是深色介面，結果朋友說要有淺色模式。我丟給 Claude 加，加完之後淺色模式的文字全部消失了——一個經典的 AI 協作翻車現場。

作者：Rich Chang | IT 基礎建設工程師 | 越南・柬埔寨・台灣